import React from "react";
import type * as CSS from 'csstype';

export interface IRailwayProps {
  /**
   * 轨道最小位置值
   */
  minPosition: number;

  /**
   * 轨道最大位置值
   */
  maxPosition: number;

  /**
   * 轨道颜色
   */
  color?: CSS.Property.BackgroundColor;

  /**
   * 将轨道绘制为多少个像素宽
   */
  width: number;

  /**
   * 将轨道绘制为多少个像素高
   */
  height: number;

}



export const RailwayContext = React.createContext({
  computeLeft: (position: number) => position - position,
  computeTop: (position: number) => position - position,
});

export class Railway extends React.Component<IRailwayProps> {

  constructor(props: IRailwayProps) {
    super(props);
    this.computeLeft = this.computeLeft.bind(this);
    this.computeTop = this.computeTop.bind(this);
  }

  computeLeft(position: number) {
    const v = (position - this.props.minPosition) / (this.props.maxPosition - this.props.minPosition) * this.props.width;
    return Math.round(v);
  }

  computeTop(position: number) {
    return position - position;
  }

  render() {
    return (
      <RailwayContext.Provider value={{
        computeLeft: this.computeLeft,
        computeTop: this.computeTop,
      }}>
        <div
          style={{
            width: this.props.width,
            height: this.props.height,
            position: 'relative',
            backgroundColor: this.props.color ?? 'blanchedalmond',
            borderRadius: 4
          }}
          >
          {this.props.children}
        </div>
      </RailwayContext.Provider>
    );
  }

};
